{% block extrahead %}
    <style type="text/css">
    #id_img {width: 600px;height: 500px;}
    </style>
{% endblock %}
{% block content %}
    <div id="{{ model_name }}_edit_form" style="{% block form_style %}padding: 10px;{% endblock %}" style="display:none"></div>
    <input type="hidden" id="id-imgs" value="{{re_images}}">
    <div id="mydiv" style="width:80%;height:0;padding-bottom: 45%;margin: 0 auto; text-align:center;">
        <tr>
            <td><input id="Button1" type="button"  value="<<" style="color:#00ff00; font-size:larger "/></td>
            <td></td>
            <td><input id="Button2" type="button" value=">>" style="color:#00ff00; font-size:larger" /></td>
        </tr>
    <table>
        <tr>
            <td><img src='' id="id_img"/></td>
        </tr>
    </table>
    </div>   
{% endblock %}
{% block extrajs %}
<script type="text/javascript">
    $(function(){
         var img_src = $('#id-imgs').val();
         var img_srcs = img_src.split(',');
         $('#id_img').attr('src', img_srcs[0]);
         var array_len = img_srcs.length;
         var array = [];
         for(var i=0;i<array_len;i++){
             array.push(i);
         }
      var count = 0;
      //后退
      $('#Button1').click(function () {
       if (count>0) {
          count--;
          $('#id_img').attr('src', img_srcs[array[count]]);
        }
      });
      //前进
      $('#Button2').click(function () {
         if (count < array_len) {
          count++;
          $('#id_img').attr('src', img_srcs[array[count]]);
          }
       });
        console.log('##count:'+count);
     })
</script>
  {% endblock %}